<template>
  <a-modal :title="type == 'add'?'新增项目':'详情'" :visible="visible"  @ok="creatProject" @cancel="handleCancel"
	 :width="880" :bodyStyle="{
        height: '700px',
        overflow: 'auto',
      }">
    <!-- <a-card> -->
      <a-form :form="form">
        <a-row>
          <a-col :md="23" :sm="24">
            <a-col :sm="20">
              <strong style="padding-left:50px;line-height:50px">项目信息</strong>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                      label="项目编号"
                      :labelCol="{span: 7,offset: 1}"
                      :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input :disabled="disabled" v-decorator="['xmbh',
                  {
                    rules: [{ required: true, message: '请输入项目编号!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                      label="项目名称"
                      :labelCol="{span: 7,offset: 1}"
                      :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input :disabled="disabled" v-decorator="['xmmc',
                  {
                    rules: [{ required: true, message: '请输入项目名称!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                      label="项目类别"
                      :labelCol="{span: 7,offset: 1}"
                      :wrapperCol="{span: 15, offset: 1}"
              >
                <a-select :disabled="disabled" @change="xmlbChange" allowClear v-decorator="['xmlbm',
                  {
                    rules: [{ required: true, message: '请选择项目类别!' }],
                  }]">
                  <a-select-option v-for="i in HWXNYJYDSXMLBM" :key="i.id" :value="i.code">{{ i.name }}
                  </a-select-option>
                </a-select>
                <a-input v-if="isShow" :disabled="disabled" placeholder="项目编号" v-decorator="['qtxmbh',
                  {
                    rules: [{ required: true, message: '输入内容为项目项目编号!' }],
                  }]"/>
                <a-input v-if="isShow" :disabled="disabled" placeholder="项目名称" v-decorator="['qtxmmc',
                  {
                    rules: [{ required: true, message: '输入内容为项目名称!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目开始时间"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-date-picker :disabled="disabled" v-decorator="['kssj',
                  {
                    rules: [{ required: true, message: '请选择项目起止时间!' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目结束时间"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-date-picker :disabled="disabled" v-decorator="['jssj',
                  {
                    rules: [{ required: true, message: '请选择项目起止时间!' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目类型"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-select :disabled="disabled" v-decorator="['xmlxm',
                  {
                    rules: [{ required: true, message: '请选择项目类型' }],
                  }]" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in HWXNYJYDSXMLXM" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="项目经费"
                :labelCol="{span: 7,offset: 1}"
                :wrapperCol="{span: 15, offset: 1}"
              >
                <a-input :disabled="disabled" v-decorator="['xmjf',
                  {
                    rules: [{ required: true, message: '项目经费' }],
                  }]" addon-after="万元"/>
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-item
                label="学生"
                :labelCol="{span: 3,offset: 1}"
                :wrapperCol="{span: 19, offset: 1}"
              >
                <a-select :disabled="disabled2" mode="multiple" v-decorator="['studentIds',
                  {
                    rules: [{ required: false, message: '请选择学生' }],
                  }]" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in selectMenu.xsList" :key="i.xsxxId" :value="i.xsxxId">{{ i.xm }} {{ i.ssyxmc }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-item
                label="项目说明"
                :labelCol="{span: 3,offset: 1}"
                :wrapperCol="{span: 19, offset: 1}"
              >
                <a-textarea :disabled="disabled" v-decorator="['note',
                  {
                    rules: [{ required: false, message: '备注' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <template v-if="type == 'detail'">
              <a-col :md="12" :sm="24">
                <a-form-item
                  label="研究院审核意见"
                  :labelCol="{span: 8,offset: 1}"
                  :wrapperCol="{span: 14, offset: 1}"
                >
                  <a-textarea v-decorator="['shyj']" :disabled="true" :rows="4" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item
                  label="国际处审核意见"
                  :labelCol="{span: 8,offset: 1}"
                  :wrapperCol="{span: 14, offset: 1}"
                >
                  <a-textarea v-decorator="['gjcshyj']" :disabled="true" :rows="4" />
                </a-form-item>
              </a-col>
            </template>
          </a-col>
        </a-row>
      </a-form>
      <template slot="footer">
        <a-button v-if="type == 'add' || type == 'detail'" key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button v-if="type == 'add'" type="primary" :loading="loadingBtn" @click="creatProject('01')">
          保存
        </a-button>
        <a-button v-if="type == 'xg'" type="primary" :loading="loadingBtn" @click="creatProject('02')">
          提交
        </a-button>
        <!-- <a-button v-if="type != 'add'" key="submit" type="primary" :loading="loading" @click="exportWord">
          导出资料卡
        </a-button> -->
      </template>
  </a-modal>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
import ACol from "ant-design-vue/es/grid/Col";
const selectArr = ['HWXNYJYDSXMLBM', 'HWXNYJYDSXMLXM', 'TYPE0011', 'TYPE0360', 'TYPE0342', 'TYPE0018', 'TYPE0023']
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  props: ['visible','type','id','b'], //接收父组件传值
  data () {
    return {
      selectMenu: {},
      uploadUrl:`${process.env.SERVICE_URL}upload/img`,
      loading: false,
      imageUrl: '',
      loadingBtn: false,
      dsbh: '',
      zsnd: '',
      dsxx:{},
      disabled: false,
      disabled2: false,
      isShow: false
    }
  },
  components: {ACol},
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      HWXNYJYDSXMLXM: state => state.app['HWXNYJYDSXMLXM'], // 是否在岗
      TYPE0011: state => state.app['TYPE0011'], // 性别
      HWXNYJYDSXMLBM: state => state.app['HWXNYJYDSXMLBM'], //
      TYPE0360: state => state.app['TYPE0360'], // 导师类别
      TYPE0342: state => state.app['TYPE0342'], // 职称
      TYPE0018: state => state.app['TYPE0018'], // 学历
      TYPE0023: state => state.app['TYPE0023'] // 学位
    })
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.$store.dispatch('app/sysInfo').then(res => {
      this.zsnd = this.systemInfo.masterAdmissionYear
    })
    this.initSelectMenu()
  },
  watch:{
    visible(val) {
      this.$api.overseas.xsxxList({id: this.id}).then(res => {
        this.selectMenu = {
          xsList: res.data,
        }
      })

      if (val && this.id) {
        this.$api.overseas.projectInfo(this.id).then(res => {
          let option = res.data
          option.studentIds = option.students.map((item) => item.id)
          console.log(option)
          let keys = Object.keys(this.form.getFieldsValue())
          let obj = {}
          keys.forEach(key => {
            obj[key] = option[key]
          })
          console.log(obj)
          this.form.setFieldsValue(obj)
        })
        if(this.type == 'add' || this.b.shzt == '01' || this.b.shzt == '22' || this.b.shzt == '24'){
            this.disabled = false

        }else if(this.type == 'xg' && this.b.shzt == '23'){
          this.disabled = true
          this.disabled2 = false
        }else{
          this.disabled = true
          this.disabled2 = true
        }
      }else{
          this.disabled = false
          this.disabled2 = false
      }
    }
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        this.$api.overseas.xsxxList(),
      ]
      Promise.all(allRequest).then(res => {
        console.log(res)
        this.selectMenu = {
          yx: res[0].data,
          xsList: res[1].data,
        }
        console.log(this.selectMenu.xsList)
      })
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    creatProject (shzt) {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        try {
          this.loadingBtn = true
          for (const key in values) {
            if (['rdpzny', 'scrbdny', 'scrsdny'].includes(key) && values[key]) {
              values[key] = values[key].format('YYYYMM')
            }
          }
          // studentIds
          this.$DateToString(values)
          console.log(values)
          values.shzt = shzt
          values.id = this.id
          this.$message.loading('保存中', 0)
          this.$api.overseas.addProject(values).then(res => {
            this.$message.success(res.msg, 4)
            this.$message.destroy()
            this.$emit('cancel')
          }).finally(() => {
            setTimeout(() => {
              this.$message.destroy()
            }, 4000);
            this.loadingBtn = false
            // this.form.resetFields()
          })
        } catch (error) {
          console.log(error)
        }
      })
    },
    handleCancel(){
      this.form.resetFields()
      this.$emit('cancel')
      // this.form.resetFields()
    },
    xmlbChange(value){
      console.log(value)
      if(value == '05'){
        this.isShow = true
      }else{
        this.isShow = false
      }
    }
  }
}
</script>
